.tool-widget-window {
    height: 545.867px;
    width: 311.033px;
    display: none;
    grid-template-rows: 7% 93%;
    justify-self: center;
    align-self: end;
    position: sticky;
    bottom: 10px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 6px black;

    & .tw-title-bar {
        display: grid;
        grid-template-columns: 10% 80% 10%;
        grid-template-areas: "empty title x-button";
        place-items: center;
        user-select: none;
        font-size: 30px;
        color: white;
        background: linear-gradient(#95afd0, #4f79b0, #2f496a);

        & .tw-title {
            grid-area: title;
        }

        & .tw-x-button {
            grid-area: x-button;
            height: 100%;
            width: 100%;
            display: grid;
            place-items: center;
            background: linear-gradient(#ff6666, #ff0000, #990000);
        }
        & .tw-x-button:hover { background: linear-gradient(#ff9999, #ff3333, #cc0000); }
        & .tw-x-button:active { background: linear-gradient(#ff3333, #cc0000, #660000); }
    }

    & .tw-content-body {
        display: grid;
        grid-template-rows: 6% 6% 6% 82%;

        & p {
            display: grid;
            place-items: center;
            font-size: 22px;
            color: white;
            background: #00008b;
            user-select: none;
        }

        & .tw-text-query {
            display: grid;
            grid-template-columns: 84% 16%;
            place-items: center;

            & .tw-text-input {
                width: 90%;
            }
        }

        & .tw-tag-container {
            display: grid;
            grid-template-rows: 8% 92%;

            & .tw-tag-filter {
                place-self: center;
            }

            & .tw-tag-index {
                display: grid;
                grid-template-rows: repeat(auto-fit, 6%);
                grid-auto-rows: 6%;
                overflow: auto;

                & li { display: grid; align-items: center; }
                & li:nth-child(odd) { background: #d9d9d9; }
                & a { width: fit-content; margin-left: 2%; text-decoration: none; }
            }
        }
    }
}